倒數計時 - 經典的 Loop 問題

function countDown() {
  let count = 60;
  for (let i = count; i > 0; i--) {
    console.log(i + "...");
  }
  console.log("0!");
}

結果會在 function 被 call 後立即將倒數計時打印到 console 上, 但如果我們想將每行打印結果延遲 1 秒該怎麼辦呢？

答案是使用 Timers (計時器):

認識 JavaScript 後, 你會有很大的機會需要用到一個瀏覽器計時類型 API, 那就是透過 JavaScript 來控制時間或是設定計時器 (Timers) 的 setTimeout 和 setInterval。
在給定的時間到了之後，執行對應的 function 內容, 用來延遲或是不斷重複 functions。

設定 Timers

• setTimeout 和 setInterval 都會回傳一個表示計時器的 ID。Window 才可透過此 ID 來訪問並且去管理頁面計時器。
• 如果你有權訪問此 ID，則可以通過將 ID 傳遞給 clearTimeout/clearInterval 來告訴 window 停止執行此特定計時器。

setTimeout

// setTimeout function 接受兩個參數，第一個參數 function 是我們要延遲執行的 function 名稱, 第二個參數 delay 是延遲執行的毫秒數, 如果第二個參數省略不寫，則默認毫秒數為 0。

let timerId = setTimeout(callbackFunction, delay);
let timerId = setTimeout(timerExample, 3000);

可以視為監聽事件 X 秒已過去 後並在事件觸發時呼叫 function。

Example:

html

<h1>setTimeout Example</h1>
<p>The pokeball will be open after 3 seconds the button is clicked!</p>

<img src="https://cf.shopee.tw/file/816217202c8c2b4e286b0217e1759a63" alt="" />

<button>Open</button>

css

img{
  width: 200px;
  display: block;
  margin: auto;
  margin-top: 20px;
}
button{
  display: block;
  margin: auto;
  font-size: 20px;
  margin-top: 10px;
}

js

$("button").click(function() {
  setTimeout(open, 3000); // 3秒後執行 open function，更換  img
  reset();
})
function reset() {
  $("img").attr("src", "https://cf.shopee.tw/file/816217202c8c2b4e286b0217e1759a63");
}
function open() {
  $("img").attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwT-LAlCgyIp-LD0zUf9acHD6jVnlG3NieCQ&usqp=CAU");
}

點擊 open 按鈕後, 延遲三秒鐘,…

有興趣的話, 可以進入這個連結來玩看看喔! https://codepen.io/ariel0122/pen/rNvpBNR

setInterval

// setInterval 與 setTimeout 大同小異, 當你想定期運行一些代碼時, 可以使用 setInterval無限次的執行計時器。

let timerId = setInterval(callbackFunction, delay);
let timerId = setInterval(timerExample, 3000);

可以視為 每經過 X 秒 去監聽事件並在事件觸發時呼叫 function。

Example: 設計一個倒數計時器
編寫一個從 3 開始倒數的 function。每秒四秒鐘，打印 “3”，然後是 “2”，接著是 “1”，最後是“Go！”。

js

function interval() {
  let currentNum = 3;
  let timerId = setInterval(function() {
    if (currentNum <= 0) {
      console.log("Go!");
      clearInterval(timerId);
    } 
    else {
      console.log(currentNum);
      currentNum--;
    }
  }, 1000);
}